<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.js"></script>
		<script src="js/weixin_utils.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.plusReady(function(){
				// 获取好友申请列表
				util.ajax({
					url: api.applyFriendList,
					data: {},
					success: function(resp) {
						if (resp.code == 200 && resp.httpCode == 200) {
							// 获取好友列表
							var fList = resp.data;
							showFriendList(fList);
						} else if(resp.code == 1){
							plus.nativeUI.toast(resp.msg);
						}
					}
				})
				
				function showFriendList(fList) {
				    for (var i = 0; i < fList.length; i++) {
						(function(f) { // 使用立即执行函数创建新的作用域
							var f = fList[i]; // 好友的记录对象
							// 判断是谁添加谁
							var isInitiator = f.isInitiator;
							var fObj = f.fInfo;
							// 验证消息
							var msg = f.msg;
							// 添加状态 1待处理 2已添加 3拒绝
							var color = 'color: #666;';
							var status = f.status;
							if(status == 2){
								var status_text = '已添加';
								var color = 'color: green;';
							} else if(status == 1){
								var status_text = '待处理';
							} else if(status == 3){
								var status_text = '拒绝';
								var color = 'color:red;';
							}
							// 昵称
							var nickname = f.fInfo.nickname;
							// 值为1时说明是对方添加我
							var from_apply = 1;
							if(isInitiator == "我添加对方"){
								var fObj = f.tInfo;
								var msg = "我：" + f.msg;
								var nickname = f.tInfo.nickname;
								if(status == 2){
									var status_text = '↗已添加';
									var color = 'color: green;';
								} else if(status == 1){
									var status_text = '↗待处理';
								} else if(status == 3){
									var status_text = '↗拒绝';
									var color = 'color:red;';
								}
								// 值为2时说明是我添加对方
								var from_apply = 2;
							}
							// 申请时间
							var createTime = f.createTime;
							
							
							var liEle = document.getElementById("list");
							if (liEle) {
								var html = "";
								html += '<label class="time">'+ createTime +'</label>';
								html += '<div style="margin-bottom: 10px;" id="id_'+ i +'">'
								html += '<ul class="mui-table-view">'
								html += '<li class="mui-table-view-cell mui-media">'
								html += '<a href="javascript:;">' 
								if (fObj.miniAvatar) {
									html += '<img class="mui-media-object mui-pull-left" src="' + fObj.miniAvatar + '" style="border-radius: 5px;width: 40px;height: 40px;">';
								} else {
									html += '<img class="mui-media-object mui-pull-left" src="" style="border-radius: 5px;width: 40px;height: 40px;">';
								}
								html += '<div class="mui-media-body">'
								html += '<label for="">'+ nickname +'</label>'
								html += '<p class="mui-ellipsis">'+ msg +'</p>' 
								html += '<label for="" style="position: absolute;right: 15px;top: 10px;'+ color +'">'+ status_text +'</label>'
								html += '</div>'
								html += '</a>'
								html += '</li>'
								html += '</ul>'
								html += '</div>'
							
								liEle.insertAdjacentHTML('beforebegin', html);
							}
						
							// 点击跳转至对应详情
							document.getElementById("id_" + i).addEventListener("tap", function() {
								// 根据申请id 获取用户详情
								util.ajax({
									url: api.newFriendInfo,
									data: {
										"apply_id": f.id
									},
									success: function(resp) {
										if (resp.code == 200 && resp.httpCode == 200) {
											mui.openWindow({
												url: 'searchResult.html',
												id: 'searchResult.html',
												extras: { // 向新页面传参
													'data': resp.data,
													'from_apply': from_apply,
												}
											});
										}
									}
								});
							});
						})(fList[i]); // 立即执行函数，传入当前的 f
				    }
				}
				
			})
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="box-shadow: none;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新的朋友</h1>
		</header> 
		
		<div style="margin-top: 50px;" class="container">
			<div id="list">
				<!-- 模板 -->
				<!-- <label class="time">2024-11-21 11:13:26</label>
				<div>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="image/标签.png">
								<div class="mui-media-body">
									<label for="">昵称</label>
									<p class="mui-ellipsis">验证消息</p>
								</div>
								<label for="" style="position: absolute;right: 15px;top: 10px;color: #666;">↗已添加</label>
							</a>
						</li>
					</ul>
				</div> -->
			</div>
		</div> 
		
	</body>

</html>
<style type="text/css">
	.container {
		position: relative;
		height: 100vh; /* 使容器高度为视口高度 */
	}
	
	.time{
		width: 100%;
		padding-left: 20px;
		font-size: 13px;
		display: inline-block;
		color: #666;
	}
	
</style>